<template>

  <div class="AddOrUpdate_main add_container main_container">

    <div class="main_main">

      <div class="title">
        个人信息
      </div>
      <div class="formItem_header">
        基础信息
      </div>
      <div class="avatar_title">
        头像
      </div>
      <div class="personalCenter_div">
        <div class="avatar_div_container">
          <div class="avatar_div">
            <img :src="avatar" style="object-fit: contain;">
            <a class="avatar_button" @click="changeAvatar"><svg-icon icon-class="编辑" /></a>
          </div>
        </div>
        <div>
          <div>修改头像</div>
          <!-- <div class="tip">可以拖到图片到左边头像区域完成上传</div> -->
        </div>
      </div>

      <div class="formItem_header">
        账号信息
      </div>
      <div class="info">
        <div class="label">登录账号:</div>
        <div class="value">{{ formData.userName }}</div>
        <div class="value" />
      </div>
      <div class="info">
        <div class="label">账号密码：</div>
        <div class="value">******</div>
        <div class="button" @click="changePassword">重置密码</div>
      </div>
      <div class="info">
        <div class="label">微信：</div>
        <div class="value">{{ unionId?'已绑定':'未绑定' }}</div>
        <div v-if="unionId" class="button" @click="unbindWx">解绑</div>
        <div v-else class="button" @click="bindWx">绑定</div>
      </div>
      <!-- <div class="accountInfo_div">
        <div class="accountInfo_item">
          <div class="accountInfo_item_name">登录账号:</div>
          <div class="value">1111</div>
          <div class="accountInfo_item_value">
            <div class="value_show_name">{{ formData.userName }}</div>
          </div>
        </div>
        <div class="accountInfo_item">
          <div class="accountInfo_item_name">账号密码：</div>
          <div class="value">1111</div>
          <div class="accountInfo_item_value">
            <a class="value_show_operate" @click="changePassword">重置密码</a>
          </div>
        </div>
        <div class="accountInfo_item">
          <div class="accountInfo_item_name">微信：</div>
          <div class="value">1111</div>
          <div class="accountInfo_item_value">
            <a class="value_show_operate" @click="changePassword">绑定</a>
            <a class="value_show_operate" @click="changePassword">解绑</a>
    </div>
  </div>
  </div> -->

    </div>
  </div>
</template>

<script>
import { updateUser as update, getUser as getById } from '@/api/system/user'
import { mapGetters } from 'vuex'
import AvatarUpload from '../AvatarUpload'
import ChangePassword from '../ChangePassword'
import wxScan from './wxScan.vue'
import { unbindQrcode } from '@/api/system/personalCenter'
export default {
  name: 'PersonalAccount',
  computed: {
    ...mapGetters([
      'userId', 'userName', 'companyId', 'avatar'
    ])
  },
  data() {
    return {
      formData: {
        userId: undefined,
        realName: undefined,
        email: undefined,
        deptName: undefined,
        deptId: undefined,
        expirationTime: '',
        userName: ''
      },
      isAdmin: false,
      edit1: false,
      edit2: false,
      unionId: '',
      rules: {
        name: [
          { required: true, message: '公司名称不能为空', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getById()
    this.unionId = this.$store.state.user.unionId
  },
  methods: {
    unbindWx() {
      unbindQrcode().then(res => {
        this.$message.success('解绑成功')
        setTimeout(() => {
          this.$router.go(0)
        }, 1000)
      })
    },
    bindWx() {
      this.$layer.iframe({// 弹框
        content: {
          content: wxScan, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['300px', '300px'],
        title: '绑定微信', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    getById() {
      getById(this.userId).then(res => {
        this.formData.deptId = res.data.dept ? res.data.dept.deptId : ''
        this.formData.deptName = res.data.dept ? res.data.dept.deptName : ''
        this.formData.realName = res.data.realName
        this.formData.userName = res.data.userName
        this.$store.state.user.userName = res.data.realName
        this.formData.email = res.data.email
        this.formData.userId = res.data.userId
        this.formData.expirationTime = res.roles[0].expirationTime
        this.isAdmin = res.data.isAdmin
        this.edit1 = false
        this.edit2 = false
      })
    },
    onSubmit() {
      let tag = true
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (tag && !this.formData.realName) {
        tag = false
        this.$message({
          message: '姓名不能为空',
          type: 'warning'
        })
      }
      if (tag && this.formData.email && !reg.test(this.formData.email)) {
        tag = false
        this.$message({
          message: '邮箱格式不正确',
          type: 'warning'
        })
      }
      if (tag) {
        update(this.formData).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })

          this.getById()
        })
      }
    },
    changeAvatar() { // 修改头像
      this.$layer.iframe({// 弹框
        content: {
          content: AvatarUpload, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['880px', '600px'],
        title: '修改头像', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    changePassword() { // 修改头像
      this.$layer.iframe({// 弹框
        content: {
          content: ChangePassword, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['440px', '600px'],
        title: '修改密码', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    }
  }
}
</script>

<style lang="less" scoped>
.info{
  // width: 500px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  .label{
    width: 120px;
    padding: 10px;
    // height: 40px;
    font-size: 18px;
    font-weight: 400;
    color: #666;
  }
  .value{
        padding: 10px;
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
  }
  .value2{

        width: 150px;
  }
  .button{
    width: 100px;text-align:right;
    color: #387bfc;
    cursor: pointer;
  }
}
.title{
  font-size: 30px;
  color: rgb(0, 118, 224);
}
.avatar_title{
  color: #999;
  padding-left: 10px !important;
}
.tip{
  color: #999;
}
.formItem_header{
  font-weight: 500;
  margin-top: 20px;
  font-size: 24px !important;
  padding-left: 10px !important;
}
.main_main{
  // margin: 0;
  padding-left: 20px;
  .personalCenter_div{
    width: 100%;height: 90px;
    display: flex;align-items: center;
    .avatar_div_container{
      width: 66px;
      height: 66px;
      border-radius: 50%;
      margin-right: 40px;
      margin-left: 10px;
      display: flex;justify-content: flex-start;align-items: center;
    }
    .avatar_div{
      height: 100%;
      width: 100%;

      position: relative;
      img{
        width: 66px;height: 66px;
        border-radius: 50%;
      }
      .avatar_button{
        position: absolute;
        top: 0;left: 0;
        width: 66px;height: 66px;
        border-radius: 50%;
        justify-content: center;align-items: center;
        font-size: 22px;
        background-color: #3333334d;
        display: none;
        color: white;
      }
    }
    .avatar_div:hover{
      .avatar_button{
        display: flex;
      }
    }
    .name_div{
      height: 100%;
      display: flex;justify-content: center;
      flex-direction: column;
      .name_div_name{
        font-size: 22px;
        height: 40px;line-height: 40px;
      }
      .name_div_company{
        font-size: 16px;
        color: #666666;
        height: 40px;line-height: 40px;
      }
    }
  }

  .accountInfo_div{
    margin: 20px 10px 0;
    .accountInfo_item{
      display: flex;align-items: center;
      .accountInfo_item_name{
        width: 100px;
        height: 40px;
        font-size: 18px;
        font-weight: 400;
        color: #666;
      }
      .value{
        width: 100px;
      }
      .accountInfo_item_value{

        height: 40px;
        width: 150px;
            text-align: right;
        .value_show{
          display: flex;align-items: center;justify-content: space-between;
          .value_show_name{
            height: 100%;
            display: flex;align-items: center;
          }
          .value_show_edit{
            height: 100%;
            display: flex;align-items: center;
            margin-left: 20px;
            font-size: 18px;
          }
        }

          .value_show_operate{
            width: 100%;text-align:right;
            color: #387bfc;
          }

        .value_edit{
          width: 100%;
          /deep/ .el-input__inner{
            height: 30px;
          }
        }
      }
    }
  }
}

</style>
